<template>
  <div class="chat-zuo">
    <img src="../assets/touxiang.jpg" alt="" class="img">
    <div class="icons">
      <i class="el-icon-s-comment"></i>
      <i class="el-icon-user-solid"></i>
      <i class="el-icon-folder"></i>
      <i class="el-icon-orange"></i>
      <i class=" el-icon-s-tools"></i>
      <i class=" el-icon-goods"></i>
      <div class="tubiao">
        <i class="el-icon-paperclip"></i>
        <i class="el-icon-mobile"></i>
        <i class="el-icon-mouse"></i>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatZuo',
};
</script>

<style lang="sass" scoped>
.chat-zuo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

.icons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icons i {
  color: white;
  font-size: 30px;
  margin: 10px 10px;
}

.tubiao {
  color: white;
  font-size: 30px;
  margin: 15px 10px;
  margin-top: 280px;

}
</style>